<template>
  <div>
    <Headline :headline1="$t('m.AccessAdmin')+'  /  '" :headline2="$t('m.GoThroughRecord')"></Headline>
    <a-card style="width: 100%">
      <a-tabs
        default-active-key="1"
        @change="callback"
        style="margin-bottom: 20px"
      >
        <a-tab-pane key="1" :tab="$t('m.Area')">
          <select-tree-area @checkData="areaSelect" />
        </a-tab-pane>
        <a-tab-pane key="2" :tab="$t('m.Equipment')" force-render>
          <a-table
            
            :columns="columns"
            :rowKey="(record) => record.id"
            :data-source="data"
            :pagination="false"
            bordered
            
          >
          <div slot="index" slot-scope="text, tags, i">
          {{i+1}}
        </div>
        <div slot="show" slot-scope="text, tags, i">
          <a-button @click="show(text, tags, i)">{{$t('m.Examine')}}</a-button>
        </div>
        
        </a-table>
          <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="setPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChange"
      />
        </a-tab-pane>
        <a-tab-pane key="3" :tab="$t('m.Organization')">
          <select-tree @checkData="argumentSelect" />
        </a-tab-pane>
      </a-tabs>
      <div v-if="flag">
          <a-input-search
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        style="width: 200px; margin-right: 15px"
        v-model="forminitialC.key"
        enter-button
        @search="onSearch"
      />
      <a-checkbox @change="checkChange" style="margin-top: 5px;margin-right:15px">
        {{$t('m.WhetherToDisplayChildNodes')}}
      </a-checkbox>
      <a-button icon="file" @click="exportExcelbtn" type="primary">{{$t('m.ExportExcel')}}</a-button>
      <a-table
        style="margin-top: 30px"
        :columns="innerColumns"
        :rowKey="(record, i) => i"
        :data-source="innerData"
        :pagination="false"
      >
        <div slot="joinBlack" slot-scope="text, tags, i">
          <a
            @click="joinBlack(text, tags, i)"
            type="primary"
            style="margin-right: 10px"
            >{{$t('m.blacklist')}}</a
          >
        </div>
        
      </a-table>
       <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="totalA"
        @change="setPagesA"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChangeA"
      />
      </div>
      <a-modal
      :title="$t('m.DiscernRecord')"
      width="800px"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null">
          <a-input-search
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        style="width: 200px; margin-right: 20px"
        v-model="forminitialC.key"
        enter-button
        @search="onSearch"
      />
      <a-checkbox @change="checkChange" style="margin-top: 5px;margin-right:20px">
        {{$t('m.WhetherToDisplayChildNodes')}}
      </a-checkbox>
      <a-button icon="file" @click="exportExcelbtn" type="primary">{{$t('m.ExportExcel')}}</a-button>
      <a-table
        style="margin-top: 40px"
        :columns="innerColumns"
        :rowKey="(record, i) => i"
        :data-source="innerData"
        :pagination="false"
      >
        <div slot="joinBlack" slot-scope="text, tags, i">
          <a
            @click="joinBlack(text, tags, i)"
            type="primary"
            style="margin-right: 10px"
            >{{$t('m.blacklist')}}</a
          >
        </div>
        
      </a-table>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import SelectTreeArea from "@/components/common/SelectTreeArea";
import SelectTree from "@/components/common/SelectTree.vue";
import { getDeviceList, getRecordList,addBlackName,exportExce } from "@/api/faceRecognition";
export default {
  name: "Gothrough",
  components: {
    Headline,
    SelectTreeArea,
    SelectTree,
  },
  data() {
    return {
      totalA:0,
        visible:false,
        flag:true,
        total:0,
      forminitial: {
        start: 0,
        limit: 10,
        devClass: 2,
        page: 1,
      },
      data: [],
      innerData: [],
      columns: [
          {title:this.$t('m.SerialNumber'),
          scopedSlots:{customRender:"index"}
          },
        { title:this.$t('m.deviceNumber'), dataIndex: "machineid" },
        { title: this.$t('m.Name'), dataIndex: "devname" },
        {title:this.$t('m.Operation'),
          scopedSlots:{customRender:"show"}
          },
      ],
      forminitialC: {
        start: 0,
        limit: 10,
        devId: 0,
        page: 1,
        devClass: "0",
        areaCode: "",
        ymOrgTreeCode: "",
        key: "",
        viewChild: false,
        startTime: "",
        endTime: "",
        dateTimeType: "",
        readHead: "",
        staffOrStudInfoId: 0,
        //startDate:this.$moment().subtract(1, "months").format("YYYY-MM-DD")
      },
      innerColumns: [
        {
          title: this.$t('m.direction'),
          dataIndex: "direction",
          customRender: function (text) {
            if (text == "1") {
              return "进";
            } else {
              return "出";
            }
          },
        },
        { title: this.$t('m.RecognitionTime'), dataIndex: "recordtime" },
        { title: this.$t('m.CardNumber'), dataIndex: "cardno" },
        { title: this.$t('m.jobnumber'), dataIndex: "stafforstucode" },
        { title: this.$t('m.Person'), dataIndex: "stafforstuname" },
        { title: this.$t('m.AnimalHeat'), dataIndex: "tiwen" },
        { title: this.$t('m.AccessControlOrAccess'), dataIndex: "doorname" },
        { title: this.$t('m.department'), dataIndex: "custorgname" },
        { title: this.$t('m.Operation'), scopedSlots: { customRender: "joinBlack" } },
      ],
    };
  },

  created() {
    this._getDeviceList();
    this.getFaceRecordList();
  },
  methods: {
      handleCancel(){
          this.visible = false
      },
      show(text, tags, i){
          this.visible = true
          this.forminitialC.areaCode = '';
      this.forminitialC.ymOrgTreeCode = "";
      this.forminitialC.devId = tags.id;
       this.getFaceRecordList();
      },
      exportExcelbtn(){
          exportExce(this.forminitialC)
      .then(res => {
        location.href = this.$store.state.BaseUrl + res.data.msg
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
      },
    onSearch() {
      this.getFaceRecordList();
    },
    checkChange(e) {
        this.forminitialC.viewChild = e.target.checked
      this.getFaceRecordList()
    },
    joinBlack(text,tags,i){
      console.log(tags.cardno)
      addBlackName({cardNos:tags.cardno})
      .then(res => {
        console.log(res)
        if(res.data.success == true) {
          this.$message.success(res.data.msg)
        }
        if(res.data.success == false) {
          this.$message.error(res.data.msg)
        }
      })
      .catch(err => {
        this.$message.error('操作失败')
      })
    },
    setShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.forminitial.start = (page - 1) * limit;
      this._getDeviceList();
    },
    setPages(page, pageSize) {
      this.forminitial.page = page;
      this.forminitial.limit = pageSize;
      this.forminitial.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
    setShowSizeChangeA(page, limit) {
      this.forminitialC.page = page;
      this.forminitialC.limit = limit;
      this.forminitialC.start = (page - 1) * limit;
      this.getFaceRecordList();
    },
    setPagesA(page, pageSize) {
      this.forminitialC.page = page;
      this.forminitialC.limit = pageSize;
      this.forminitialC.start = (page - 1) * pageSize;
      this.getFaceRecordList();
    },
    getFaceRecordList() {
      getRecordList({ params: this.forminitialC })
        .then((res) => {
          this.totalA = res.data.total;
          this.innerData = res.data.data;
          console.log(res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    argumentSelect(data) {
        this.forminitialC.devId = 0
      this.forminitialC.areaCode = ''
      this.forminitialC.ymOrgTreeCode = data.ymorgtreecode
      this.getFaceRecordList()
      console.log(data);
    },
    // onSelectChange(selectedRowKeys, selectedRows) {
    //     console.log(selectedRows)
    //   this.forminitialC.areaCode = '';
    //   this.forminitialC.ymOrgTreeCode = "";
    //   this.forminitialC.devId = selectedRows[0].id;

    //   this.getFaceRecordList();
    // },
    _getDeviceList() {
      getDeviceList({ params: this.forminitial })
        .then((res) => {
            this.total = res.data.total
          this.data = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    areaSelect(e) {
      this.forminitialC.devId = e.id;
      this.areaValue = e.id;
      this.forminitialC.devId = 0;
      this.forminitialC.ymOrgTreeCode = "";
      this.forminitialC.areaCode = e.areacode;
      this.getFaceRecordList();
      console.log(e);
    },
    callback(key) {
        if(key == 2) {
            this.flag = false
        } else {
            this.flag = true
        }
      console.log(key);
    },
  },
};
</script>

<style>
</style>